<template>
  <div>
    <!--下拉刷新容器-->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron">
          <li v-for="(item,i) in leaveWordList" :key="i" class="mui-table-view-cell">
            <!--留言卡片start-->
            <div class="leaveword">
              <div class="mui-card">
                <div class="mui-card-header mui-card-media">
                  <img src="/static/images/logo.png"/><!--头像应该根据item获取-->
                  <div class="mui-media-body">
                    {{item.username}}
                    <p>发表于 {{item.createTime | dateFormat()}}</p>
                  </div>
                </div>
                <div class="mui-card-content">
                  <img :src="item.imgSrc" alt="" width="100%"/>
                  <div class="mui-card-content-inner">
                    <!--overflow: hidden; white-space: nowrap; text-overflow: clip;width:100px;-->
                    <p style="color: #333;">
                      {{item.word
                      | subStr0_(50) }}
                    </p>
                  </div>
                </div>
                <div class="mui-card-footer">
                  <mt-button size="small" @click.prevent="addLaudById()" style="height: 30px">赞({{laud}})</mt-button>
                  <mt-button size="small" @click.prevent="goLeaveWordInfo(item.id)" style="height: 30px">评论(500)
                  </mt-button>
                </div>
              </div>
            </div>
            <!--留言卡片end-->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  //TODO 下拉刷新第二次进入重新刷新数据不会停留在之前的数据上.bug未解决
  import mui from "../../../lib/mui/js/mui.min.js"

  export default {
    name: 'leaveword',
    data() {
      return {
        laud: 0,//赞的数量,没有分id,只是当做一个变量使用
        count: 0,
        leaveWordList: [],
      }
    },
    methods: {
      /*根据id跳转到指定的留言详情页面*/
      goLeaveWordInfo(id) {
        this.$router.push({path: 'leavewordinfo/'+id})
      },
      /*赞一个*/
      addLaudById(id) {
        this.laud++;
        //TODO 请求后台数据,根据留言的id,增加一个赞
      },
      /*初始化上拉刷新组件*/
      initMuiPullRefresh() {
        mui('#pullrefresh').pullRefresh({
            up: {
              height: 50,//可选,默认50.触发拉动刷新拖动距离,
              auto: false,//可选,默认false.首次加载自动上拉刷新一次
              contentdown: "上拉可以刷新",//可选，在上拉可刷新状态时，上拉刷新控件上显示的标题内容
              contentover: "释放立即刷新",//可选，在释放可刷新状态时，上拉刷新控件上显示的标题内容
              contentrefresh: "正在加载...",//可选，正在刷新状态时，上拉刷新控件上显示的标题内容
              contentnomore: '我也是有底线的,留言点赞可以给我增加底线哦!',//可选，请求完毕若没有更多数据时显示的提醒内容；,
              callback: this.pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
          }
        );
      },
      /*上拉刷新事件*/
      pullupRefresh() {
        let _this = this;
        setTimeout(function () {
          mui('#pullrefresh').pullRefresh().endPullupToRefresh(((_this.count += 1) > 2)); //参数为true代表没有更多数据了。
          let list = [
            {
              id: 4 + _this.count,
              username: '小' + (4 + _this.count),
              createTime: new Date,
              imgSrc: '/static/images/shuijiao.jpg',
              word: '今天吃了饭.'
            },
            {
              id: 5 + _this.count,
              username: '小' + (5 + _this.count),
              createTime: new Date,
              imgSrc: '/static/images/yuantiao.jpg',
              word: '今天没吃饭.'
            },
            {
              id: 6 + _this.count,
              username: '小' + (6 + _this.count),
              createTime: new Date,
              imgSrc: '/static/images/cbd.jpg',
              word: '今天吃饭么?'
            }
          ];
          _this.leaveWordList = _this.leaveWordList.concat(list);
        }, 1500);
      }
    },
    created() {
      this.leaveWordList = [
        {id: 1, username: '小1', createTime: new Date, imgSrc: '/static/images/shuijiao.jpg', word: '今天吃了饭.'},
        {id: 2, username: '小2', createTime: new Date, imgSrc: '/static/images/yuantiao.jpg', word: '今天没吃饭.'},
        {id: 3, username: '小3', createTime: new Date, imgSrc: '/static/images/cbd.jpg', word: '今天吃饭么?'}
      ];
    },
    mounted() {
      /*初始化scroll控件*/
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.1, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006
        indicators: false  //隐藏一条滚动条 并增大减速系数。。。
      });
      this.initMuiPullRefresh();
    },

  };
</script>

<style scoped>

  #pullrefresh {
    margin: 44px 0 50px 0;
  }

  #pullrefresh .mui-table-view-cell {
    padding: 0;
    background-color: #efeff4;
  }
</style>
